<template>
    <div class="sexbox">
        <div class="sextitle">
            <span>男女比例</span>
            <p></p>
        </div>
        <div class="sexminimg">
            <div class="mansex">
                <span>男士</span>
                <img src="@/assets/image/screen/man.png" />
            </div>
            <div class="womansex">
                <span>女士</span>
                <img src="@/assets/image/screen/woman.png" />
            </div>
        </div>

        <div class="charts" ref="sexchar">
            212
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let sexchar = ref()
onMounted(() => {
    let myCharts = echarts.init(sexchar.value);
    // 设置实例的配置项
    myCharts.setOption({
        title: {
            text: ''
        },
        tooltip: {
            show: true,
            trigger: "item",
            formatter: "{b} <br/>占比：{c}%"
        },
        xAxis: {
            type: "value",
            show: false
        },
        yAxis: [
            {
                type: "category",
                position: "left",
                data: ["男士"],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            {
                type: "category",
                position: "right",
                data: ["女士"],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    padding: [0, 0, 40, -60],
                    fontSize: 12,
                    lineHeight: 60,
                    color: "rgba(255, 255, 255, 0.9)",
                    formatter: "{value}" + 50 + "%",
                    rich: {
                        a: {
                            color: "transparent",
                            lineHeight: 30,
                            fontFamily: "digital",
                            fontSize: 12
                        }
                    }
                }
            }
        ],
        series: [
            {
                type: "bar",
                barWidth: 20,
                data: [50],
                z: 999,
                itemStyle: {
                    borderRadius: 10,
                    color: "#007AFE"
                },
                label: {
                    show: true,
                    color: "#E7E8ED",
                    position: "insideLeft",
                    offset: [0, -20],
                    fontSize: 14,
                    formatter: () => {
                        return `男士 50%`;
                    }
                }
            },
            {
                type: "bar",
                barWidth: 20,
                data: [100],
                barGap: "-100%",
                itemStyle: {
                    borderRadius: 10,
                    color: "#FF4B7A"
                },
                label: {
                    show: true,
                    color: "#E7E8ED",
                    position: "insideRight",
                    offset: [0, -20],
                    fontSize: 14,
                    formatter: () => {
                        return `女士 50%`;
                    }
                }
            }
        ],
        // 布局设置
        grid: {
            top: 20,
            left: 50,
            right: 60,
            bottom: 0,
            containLabel: true
        }
    })
})
</script>
<style scoped lang="scss">
.sexbox {
    margin: 10px 0;
    height: 300px;
    box-sizing: border-box;
    background: url('@/assets/image/screen/dataScreensexmaincb.png');
    background-size: 100% 100%;

    p {
        margin-top: 10px;
        width: 68px;
        height: 7px;
        background: url('@/assets/image/screen/dataScreen-title.png') no-repeat;
        background-size: 100% 100%;
    }

    .sextitle {
        height: 60px;

        span {
            color: white;
        }
    }

    .sexminimg {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // width: 100%;
        // margin-top: 40px;
        display: flex;
        box-sizing: border-box;
        margin-top: 60px;
        height: 100px;
        justify-content: space-around;

        // transform: translate(-50%,-50%);
        span {
            color: white;
            font-size: 14px;
            // background-color: white;
            margin-bottom: 20px;
        }

        .mansex {
            display: flex;
            flex-direction: column;
            align-items: center;

            width: 100px;
            height: 120px;
            background: url('@/assets/image/screen/man-bg.png') no-repeat;
            background-size: 100% 100%;
        }

        .womansex {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100px;
            height: 120px;
            background: url('@/assets/image/screen/man-bg.png') no-repeat;
            background-size: 100% 100%;
        }
    }

    .charts {
        margin-top: 20px;
        width: 100%;
        height: 100px;
        // background-color: red;
    }

}</style>